<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>YouTube</title>
  <link rel="icon" href="/youtube.svg" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Youtube Clone" />
  <link rel="apple-touch-icon" href="/youtube.svg" />
  <link href="./css/style.css" rel="stylesheet" />
  <link href="./css/layout.css" rel="stylesheet" />
  <link href="./lib/video.js/video-js.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="./css/watch.css">
  <link rel="stylesheet" href="./lib/toastify-js/toastify.css">
</head>

<body>
  <div class="header">
    <div class="logo flex-row">
      <svg class="toggle-navhandler" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"
        height="22" width="22" fill="#FFF" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #fffede">
        <g>
          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
        </g>
      </svg>
      <span><a href="/">YouTube</a></span>
    </div>
    <div class="searchBar">
      <input class="search" type="text" placeholder="Search" value="" />
    </div>
    <ul>
      <li>
        <div>
          <label for="video-upload"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" height="27" width="27"
              fill="#FFF" focusable="false" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #fffede">
              <g>
                <path
                  d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z">
                </path>
              </g>
            </svg></label>
          <input id="video-upload" type="file" accept="video/*" style="display: none" />
        </div>
      </li>
      <li>
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="27" fill="#FFF"
          width="27" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #fffede">
          <g>
            <path
              d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z">
            </path>
          </g>
        </svg>
      </li>
      <li>
        <a href="/channel.html"><img class="user pointer" src="images/user.png" alt="user-avatar" /></a>
      </li>
    </ul>
  </div>
  <div class="sidebar">
    <a href="/">
      <div class="icon">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
          fill="#AAAAAA" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ccbea4">
          <g>
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8"></path>
          </g>
        </svg>
        <span>首页</span>
      </div>
    </a><a href="/trending.html">
      <div class="icon">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
          fill="#AAAAAA" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ccbea4">
          <g>
            <path
              d="M17.53 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66-1.46-1.46-1.78-3.87-.85-5.72-.9.23-1.75.75-2.45 1.32C8.9 6.4 7.9 10.07 9.1 13.22c.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12-.06-.05-.1-.1-.15-.17-1.1-1.43-1.28-3.48-.53-5.12C5.87 10 5 12.3 5.12 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.3 1.5-6.6l-.13-.26c-.2-.45-.47-.87-.78-1.25zm-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.38-2.2-.16-2.88-.82 1.2-.28 1.9-1.16 2.1-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.2-2.06.15.38.35.76.58 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.26z">
            </path>
          </g>
        </svg>
        <span>时下流行</span>
      </div>
    </a><a href="/subscriptions.html">
      <div class="icon">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
          fill="#AAAAAA" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ccbea4">
          <g>
            <path
              d="M18.7 8.7H5.3V7h13.4v1.7zm-1.7-5H7v1.6h10V3.7zm3.3 8.3v6.7c0 1-.7 1.6-1.6 1.6H5.3c-1 0-1.6-.7-1.6-1.6V12c0-1 .7-1.7 1.6-1.7h13.4c1 0 1.6.8 1.6 1.7zm-5 3.3l-5-2.7V18l5-2.7z">
            </path>
          </g>
        </svg>
        <span>订阅内容</span>
      </div>
    </a>
    <div class="ruler"></div>
    <a href="/library.html">
      <div class="icon">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
          fill="#AAAAAA" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ccbea4">
          <g>
            <path fill="none" d="M0 0h24v24H0z"></path>
            <path
              d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z">
            </path>
          </g>
        </svg>
        <span>媒体库</span>
      </div>
    </a><a href="/history.html">
      <div class="icon">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
          fill="#AAAAAA" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ccbea4">
          <g>
            <path
              d="M11.9 3.75c-4.55 0-8.23 3.7-8.23 8.25H.92l3.57 3.57.04.13 3.7-3.7H5.5c0-3.54 2.87-6.42 6.42-6.42 3.54 0 6.4 2.88 6.4 6.42s-2.86 6.42-6.4 6.42c-1.78 0-3.38-.73-4.54-1.9l-1.3 1.3c1.5 1.5 3.55 2.43 5.83 2.43 4.58 0 8.28-3.7 8.28-8.25 0-4.56-3.7-8.25-8.26-8.25zM11 8.33v4.6l3.92 2.3.66-1.1-3.2-1.9v-3.9H11z">
            </path>
          </g>
        </svg>
        <span>历史记录</span>
      </div>
    </a><a href="/channel.html">
      <div class="icon">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" height="22" width="22"
          fill="#AAAAAA" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ccbea4">
          <g>
            <path
              d="M18.4 5.6v12.8H5.6V5.6h12.8zm0-1.8H5.6a1.8 1.8 0 0 0-1.8 1.8v12.8a1.8 1.8 0 0 0 1.8 1.9h12.8a1.8 1.8 0 0 0 1.9-1.9V5.6a1.8 1.8 0 0 0-1.9-1.8z">
            </path>
            <path d="M10.2 9v6.5l5-3.2-5-3.2z"></path>
          </g>
        </svg>
        <span>您的视频</span>
      </div>
    </a><a href="/liked_videos.html">
      <div class="icon">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" fill="#AAAAAA" width="22"
          height="22" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ccbea4">
          <g>
            <path
              d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z">
            </path>
          </g>
        </svg>
        <span>顶过的视频</span>
      </div>
    </a>
    <div class="ruler"></div>
    <div class="subscribe_user"></div>
  </div>
  <div class="main">
    <div class="content">
      <div class="video-container">
        <div class="video">
          <!-- 视频播放器 -->
          <video id="my-player" class="video-js vjs-big-play-centered" controls preload="auto">
            <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser
              that
              <a href="https://videojs.com/html5-video-support/" target="_blank"> supports HTML5 video </a>
            </p>
          </video>
        </div>
        <div id="videoDetails">
          <!-- 视频信息 -->

        </div>
        <div class="comment-container">
          <!-- 评论区域 -->
        </div>
      </div>
      <div class="related-videos">
        <!-- 右侧的推荐视频 -->
      </div>
    </div>
  </div>

  <!-- 视频详情模板 -->
  <script id="tplVideo" type="text/html">
    <div class="video-info">
      <h3>{{ video.title }}</h3>
      <div class="video-info-stats">
        <p><span>{{ video.views }} views</span> <span>•</span> <span>{{ video.createdAt | relativeTime }}</span></p>
        <div class="likes-dislikes flex-row">
          <p class="flex-row like">
            <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" fill="#AAAAAA"
              width="22" height="22" data-darkreader-inline-fill=""
              style="--darkreader-inline-fill:#e3d4b8; fill: rgb(56, 56, 56);">
              <g>
                <path
                  d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z">
                </path>
              </g>
            </svg>
            <span>{{ video.likesCount }}</span>
          </p>
          <p class="flex-row dislike" style="margin-left: 1rem">
            <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" width="22" height="22"
              style="fill: rgb(56, 56, 56); --darkreader-inline-fill:#e3d4b8;" data-darkreader-inline-fill="">
              <g>
                <path
                  d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z">
                </path>
              </g>
            </svg>
            <span>{{ video.dislikesCount }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="channel-info-description">
      <div class="channel-info-flex">
        <div class="channel-info flex-row">
          <img class="avatar md"
            src="{{ video.User.avatar }}"
            alt="channel avatar">
          <div class="channel-info-meta">
            <h4>
              <a href="/channel.html?id="{{ video.User.id }}">{{ video.User.username }}</a>
            </h4>
            <span class="secondary small">{{ video.subscribersCount }} subscribers</span>
          </div>
        </div>
        {{ if !video.isVideoMine }}
        <button class="subscribe {{ video.isSubscribed ? '' : 'active' }}">{{ video.isSubscribed ? 'Subscribed' : 'Subscribe' }}</button>
        {{ /if }}
      </div>
      <p>{{ video.description }}</p>
    </div>
  </script>

  <!-- 右侧推荐视频模板 -->
  <script id="tplRelatedVideos" type="text/html">
    <h3 style="margin-bottom: 1rem">Up Next</h3>

    {{ each videos }}
    <a href="/watch.html?id={{ $value.id }}">
      <div class="sc-fzozJi dteCCc">
        <img class="thumb"
          src="{{ $value.thumbnail }}"
          alt="thumbnail">
        <div class="video-info-container">
          <div class="channel-avatar"></div>
          <div class="video-info">
            <h4>{{ $value.title }}</h4>
            <span class="secondary">{{ $value.description }}</span>
            <p class="secondary">
              <span>{{ $value.views }} views</span> <span>•</span> <span>{{ $value.createdAt | relativeTime }}</span>
            </p>
          </div>
        </div>
      </div>
    </a>
    {{ /each }}
  </script>

  <script id="tplComment" type="text/html">
    <h3>{{ video.comments.length }} comments</h3>
    <div class="add-comment">
      <!-- 此处应该显示的是当前登陆的用户的头像
           当前登陆用户的信息，应该再次发送请求，接口地址：/me
      -->
      <img
        src="https://res.cloudinary.com/tylerdurden/image/upload/v1602657481/random/pngfind.com-default-image-png-6764065_krremh.png"
        alt="avatar">
      <textarea placeholder="Add a public comment"></textarea>
    </div>
    <!-- 评论列表 -->
    <div class="list">
      {{ each video.comments }}
      <div class="comment">
        <a href="/channel.html?id={{ $value.User.id }}"><img
            src="{{ $value.User.avatar }}"
            alt="avatar"></a>
        <div class="comment-info">
          <p class="secondary">
            <span><a href="/channel.html?id={{ $value.User.id }}">{{ $value.User.username }}</a></span><span
              style="margin-left: 0.6rem">{{ $value.createdAt | relativeTime }}</span>
          </p>
          <p>{{ $value.text }}</p>
        </div>
      </div>
      {{ /each }}
    </div>
  </script>

  <script src="./lib/jquery/jquery.min.js"></script>
  <script src="./lib/video.js/video.min.js"></script>
  <script src="./lib/toastify-js/toastify.js"></script>
  <script src="./lib/axios/axios.min.js"></script>
  <script src="./lib/dayjs/dayjs.min.js"></script>
  <script src="./lib/dayjs/plugin/relativeTime.js"></script>
  <script src="./lib/art-template/template-web.js"></script>

  <script src="./scripts/http.js"></script>
  <script src="./scripts/utils.js"></script>
  <script src="./scripts/watch.js"></script>
</body>

</html>